import {defineComponent} from 'vue'

export default defineComponent({
    props: {
        tableData: {
            type: Array,
            default: []
        },
        handleBtn: {
            type: Function,
            default: () => {
            }
        },
        operateBtn: {
            type: Array,
            default: []
        },
        header: {
            type: Array,
            default: []
        },
    },
    setup(props, {scopedSlots, slots}) {
        // 表头及表格内容部分
        const headers = props.header.map(item => {
            const defaultSlot = !item.slot && slots ? null : {
                default: ({row}) => {
                    return slots[item.prop] ? slots[item.prop](row) : "-"
                },
            }
            return (
                <>
                    <el-table-column
                        prop={item.prop}
                        label={item.label}
                        width={item.width}
                        align={item.align}
                        v-slots={defaultSlot}
                    />
                </>
            )
        })

        headers.unshift(<el-table-column
            type={'index'}
            label={'序号'}
            width={'100'}
            align={'center'}
        />)
        // 操作按钮部分
        headers.push(<el-table-column
            width={'100'}
            prop={'btn'}
            label={'操作'}
            align={'center'}
            fixed={'right'}
            v-slots={{
                default: ({row}) => {
                    return props.operateBtn.map(item => {
                        return <el-button style={{marginLeft:0}} size={'small'} type={'primary'} onClick={() => {
                            props.handleBtn(item.name, row)
                        }
                        }>{item.label}</el-button>
                    })
                }
            }}
        />)


        return () => {
            return (
                <>
                    <el-table index data={props.tableData} border style={{width: '100%'}}
                              header-cell-style={{background: '#fafafa'}}
                    >
                        {headers}
                    </el-table>
                </>

            )
        }
    }
})